<template>
	<view>
		<navbar></navbar>
		<!-- <diy-component id="head" :diyItems="items" :max="true"></diy-component> -->
		<view class="diy-banner" v-if="banner.length">
		    <swiper
		        :snap-to-edge="true"
		        :class="'banner-box swiper-box big-swiper-box'"
		        :circular="true"
		        :indicator-dots="banner.length > 1"
		        indicator-color="rgba(255,255,255,.6)"
		        indicator-active-color="#fff"
		        @change="_bindChange"
		    >
		        <swiper-item v-for="(banner, index) in banner" :key="index">
		            <image
		                @tap.stop.prevent="navigationTo"
		                :data-url="banner.to_url"
		                class="slide-image big-max-image"
		                @load="_imagesHeight"
		                :src="banner.img_url"
		                :data-id="index"
		                :data-item-key="0"
		            ></image>
		        </swiper-item>
		    </swiper>
		</view>
		<view class="container col-f m-top40 f-22">
			<mp-html :content="info.detail"></mp-html>
		</view>
		<h3 class="container col-f m-top10 f-40">{{info.name}}</h3>
		<view v-if="!goods.loading || 0 < goods.list.length" class="container">
		    <!-- 藏品列表 -->
			<view class="assets-list">
				<!-- <goods :scroll-top="scrollTop" :info="item" @finished="countdownFinished"
					v-for="item in goods.list" :key="item.goods_id"></goods> -->
				<view v-for="item in goods.list" :key="item.goods_id" class="assets"
					@tap.stop.prevent="onAssetsTaped(item.goods_id)">
					<!-- <view class="paying" v-if="item.can_buy === 0">
						<view class="dy-iconfont icon-gjaq f-20"></view>
						支付中
					</view> -->
					<view class="assets__img-wrapper">
						<easy-loadimage class="assets__img" mode="aspectFill" :image-src="item.img_url"
							:scroll-top="scrollTop" borderRadius="10rpx 10rpx 0 0 "></easy-loadimage>
					</view>
					<view class="assets-info b-f">
						<view class="f-28 onelist-hidden--s">{{ item.goods_name }}</view>
						<!-- <view style="height: 30px;" v-if="item.is_blind_box&&!item.open_blind_box_status"></view>
						<view class="dis-flex m-top20 f-22" v-else>
							<view class="assets__no-title col-f">编号</view>
							<view class="assets__no-wrapper">
								<text>{{ item.sort_no }}</text>/{{ item.total_sort_no }}
							</view>
						</view>
						<view class="dis-flex flex-x-between flex-y-center m-top20">
							<view class="assets__price">￥{{ item.sale_price }}</view>
							<view class="dy-iconfont icon-qianjin"></view>
						</view> -->
					</view>
				</view>
			</view>
			<view v-show="goods.list.length>3 && !goods.hasMore" class="no-more f-24">
				-更多内容敬请期待-
				<view class="bsn">
					<image src="https://p6-tt.byteimg.com/origin/pgc-image/9ed074ff2e144aaca61866b159dee4bd" mode="widthFix"></image>
				</view>
			</view>
			
		</view>
		<view v-if="!goods.loading && goods.list.length == 0">
			<view class="yoshop-notcont">
				<!-- <text class="dy-iconfont icon-empty"></text> -->
				<text class="iconfont icon-wushuju"></text>
				<text class="cont">暂无数据</text>
			</view>
		</view>
	</view>
</template>

<script>
	const app = getApp();
	import navbar from "@/components/navbar/navbar";
	import diyComponent from '@/components/diy/index';
	// import sceneUtils from '../../../utils/sceneUtils.js';
	import siteinfo from '@/siteinfo.js';
	export default {
		components: {
			navbar,
			diyComponent,
		},
		data() {
			return {
				scrollTop:0,
				// 页面参数
				options: {},
				imgHeights: [],
				// 页面元素
				banner: [],
				loading: true,
				info: {},
				goods: {
					list: [],
					page: 1,
					loading: true,
					hasMore: false,
				}
			};
		},
		// computed: {
		// 	showDiy: function() {
		// 		if (Object.prototype.toString.call(this.items) === '[object Array]') {
		// 			return !this.loading && 0 < this.items.length;
		// 		} 
		// 		if (Object.prototype.toString.call(this.items) === '[object Object]') {
		// 			return !this.loading && 0 < Object.keys(this.items).length;
		// 		}
		// 		return !this.loading;	
		// 	}
		// },
		/**
		 * 生命周期函数--监听页面加载
		 */
		onLoad: function(options) {
			// 当前页面参数
			this.setData({
				options
			});
			// this.getPageData();
			// this.parseScene();
			this.requestData()
			
			// uni.pageScrollTo({
			// 	scrollTop: 0,
			// 	duration: 0
			// });
		},
		onReady: function() {
			uni.setNavigationBarTitle({
				title: siteinfo.name
			});
		},
		onShow: function() {
			
		},
		/**
		 * 分享当前页面
		 */
		onShareAppMessage() {
			// let _this = this;
			return {
				// title: _this.data.page.params.share_title,
				path: '/pages/art/detail/index?' + app.getShareUrlParams()
			};
		},
		/**
		 * 下拉刷新
		 */
		onPullDownRefresh: function() {
			// this.goods.page = 1;

			// 发售日历清空last_time,last_time 为空表示第一页
			// if (this.tab.current == 1) {
			// 	this.goods.last_time = '';
			// }

			this.requestData()
		},

		onReachBottom() {
			if (!this.goods.loading && this.goods.hasMore) {
				this.requestData();
			}
		},
		onPageScroll(e) {
			this.scrollTop = e.scrollTop;
			// if (e.scrollTop > this.topDistance + uni.upx2px(152)) {
			// 	this.isTabFixed = true
			// } else {
			// 	this.isTabFixed = false
			// }
		},

		methods: {
			/**
			 * 跳转到指定页面
			 */
			navigationTo: function (e) {
			    app.navigationTo(e.currentTarget.dataset.url);
			},
			/**
			 * 计算图片高度
			 */
			_imagesHeight: function (e) {
			    let imgwidth = e.detail.width;
			    let imgheight = e.detail.height;
			    let // 宽高比
			        ratio = imgwidth / imgheight; // 计算的高度值
			    // 获取图片真实宽度
			    let viewHeight = 750 / ratio;
			    let imgHeights = this.imgHeights; // 把每一张图片的高度记录到数组里
			    imgHeights.push(viewHeight);
			    this.setData({
			        imgHeights
			    });
			},
			// getTabBoxTop() {
			// 	let _this = this;
			// 	uni.getSystemInfo({
			// 		success: result => {
			// 			let query = uni.createSelectorQuery().in(this);
			// 			query.select('#head').boundingClientRect();
			// 			query.selectViewport().scrollOffset();
			// 			query.exec(function(res) {
			// 				_this.topDistance = res[0].height;
			// 			})
			// 		}
			// 	})
			// },
			// 查看藏品详情
			onAssetsTaped: function(id) {
				app.navigationTo(`pages/art/detail/detail?id=${id}`)
			},
			// 切换tab
			// onToggleTab(id) {
			// 	if (this.tab.current != id) {
			// 		this.tab.current = id;
			// 		this.goods = {
			// 				list: [],
			// 				page: 1,
			// 				loading: true,
			// 				hasMore: true,
			// 				last_time: ''
			// 			},
			// 			uni.showLoading();
			// 		this.requestData().then(() => {
			// 			uni.hideLoading();
			// 		})
			// 	}
			// },
			requestData() {
				this.goods.loading = true;
				return new Promise((resolve) => {
					let param = {
						publisher_series_id: this.options.id
					};
					app._get('publisher/getPublisherSeriesDetail', param, (res) => {
						if (1 == res.code) {
							this.info=res.data
							this.goods.list=res.data.goods_json
							this.banner=res.data.banner_json
							this.info.detail=this.escape2Html(this.info.detail)
							// let banner=res.data.banner_json
							// this.items={
							// 	data: [],
							// 	type: 'banner',
							// 	itemIndex: 0,
							// 	style: {}
							// }
							// console.log(this.items)
							// banner.forEach((item,index)=>{
							// 	let bannerItem = {}
							// 	bannerItem.imgUrl = item.img_url
							// 	bannerItem.linkName = item.img_id
							// 	bannerItem.linkUrl = item.to_url
							// 	this.$set(this.items.data,index,bannerItem)
							// })
						}
					},
					null,
					() => {
							resolve();
							this.goods.loading = false;
						}
					);
				});


			},
			/**
			 * 加载页面数据
			 */
			// getPageData: function(callback) {
			// 	Promise.all([this.requestWePageData(), this.requestData()]).then(() => {
			// 		uni.stopPullDownRefresh();
			// 		this.setData({
			// 			loading: false
			// 		});
			// 	});
			// },

			/**
			 * 解析场景值
			 */
			// parseScene: function() {
			// 	let scene = app.aj_getSceneData(this.options);
			// 	let url = sceneUtils.getUrl(scene);
			// 	app.navigationTo(url);
			// },

			/**
			 * 设置顶部导航栏
			 */
			setPageBar: function(page) {
				// 设置页面标题
				uni.setNavigationBarTitle({
					title: page.params.title
				}); // 设置navbar标题、颜色

				uni.setNavigationBarColor({
					frontColor: page.style.titleTextColor === 'white' ? '#ffffff' : '#000000',
					backgroundColor: page.style.titleBackgroundColor
				});
			},

			// 倒计时结束
			// countdownFinished: function() {
			// 	this.requestData();
			// },

			// requestWePageData: function() {
			// 	return new Promise((resolve, reject) => {
			// 		app._get(
			// 			'page/index', null,
			// 			(result) => {
			// 				this.setData(result.data);
			// 			},
			// 			null,
			// 			() => {
			// 				resolve();
			// 			}
			// 		);
			// 	});
			// }
		}
	};
</script>
<style lang="scss">
	page,
	body {
		background: $uni-bg-color!important;
	}
</style>
<style lang="scss" scoped>
	.container {
		padding: 0 40rpx 40rpx;
	}

	// .diy-component {
	// 	display: block;
	// 	background: $uni-bg-color;
	// 	padding-top: 40rpx;
	// }
	.bsn{
		display: flex;
		justify-content: center;
		margin-top: 20rpx;
	}
	.bsn image{
		width: 200rpx;
	}
	.assets-list {
	    overflow: hidden;
	}
	.assets {
	    width: -webkit-calc((100% - 20rpx) * 0.5);
	    width: calc((100% - 20rpx) * 0.5);
	    border-radius: 10rpx;
	    float: left;
	    box-sizing: border-box;
	}
	
	.assets:nth-child(even) {
	    margin-left: 20rpx;
	}
	
	.assets:nth-child(n+3) {
	    margin-top: 20rpx;
	}
	
	.assets .assets__img-wrapper {
	    padding-bottom: 100%;
	    position: relative;
	    border-radius: 10rpx 10rpx 0 0;
	}
	
	.assets .assets__img {
	    width: 100%;
	    height: 100%;
	    position: absolute;
	    left: 0;
	    top: 0;
	}
	.assets .assets-info {
		height: 80rpx;
		padding: 20rpx 10rpx 0;
	    border-radius: 0 0 10rpx 10rpx;
		box-sizing: border-box;
	}
	
	// .assets .assets__no-title {
	//     background: $uni-bg-color;
	//     padding: 0 10rpx;
	//     line-height: 40rpx;
	// }
	
	// .assets .assets__no-wrapper {
	//     background: rgba(0, 0, 0, 0.2);
	//     padding: 0 10rpx;
	//     line-height: 40rpx;
	// }
	
	// .assets .assets__price {
	//     color: #000;
	//     font-weight: bold;
	//     font-size: 32rpx;
	// }
	// .assets .icon-qianjin {
	//     color: #000;
	//     font-size: 36rpx;
	// }
	
	/* banner轮播 */
	.diy-banner {
	    position: relative;
	}
	.swiper-box {
	    height: 346rpx;
	}
	.swiper-box.big-swiper-box {
	    height: 376rpx;
	}
	.swiper-box swiper-item {
	    box-sizing: border-box;
	}
	
	.diy-banner .slide-image {
	    width: 608rpx;
	    height: 292rpx;
	    display: block;
	    border-radius: 28rpx;
	    margin-left: 40rpx;
	}
	.diy-banner .slide-image.big-max-image {
	    width: 100%;
		height: 100%;
		border-radius: 0;
	    margin: 0 auto;
	}
	
	
	
	
	
</style>
